<template>
  <BaseTable
    ref="baseTableRef"
    :apiUrl="byHostToVmList"
    :rowId="id"
    :isShowAddBtn="false"
    placeholder="请输入名称"
    :columns="columns"
    height="calc(100vh - 237px)"
  >
    <!-- @handleEditOrAdd="$refs.addOrEditRef.open(record)" -->
    <!-- <template #enabled="{ record }">
      <ga-switch
        :checked-value="1"
        :unchecked-value="0"
        size="mini"
        v-model="record.enabled"
        @change="handleEnabledChange(record)"
      />
    </template> -->
    <template #action="{ record }">
      <ga-link>详情</ga-link>
    </template>
  </BaseTable>
  <!-- <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" /> -->
</template>

<script setup>
import { ref, defineEmits, defineExpose, h } from "vue";
import { render } from "@/utils";
import usageRate from "common/usageRate.vue";
import { byHostToVmList } from "@/api/hostMgmt";
import TagStatus from "@/components/TagStatus/index.vue";

defineProps({
  id: {
    type: Number,
    default: "",
  },
});
const emits = defineEmits(["handleSubmit"]);
defineExpose({});
const columns = [
  {
    title: "IP",
    dataIndex: "name",
    tooltip: true,
    ellipsis: true,
    fixed: "left",
    render,
  },
  {
    title: "路径/端口",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "漏洞号",
    slotName: "enabled",
    width: 200,
    render,
  },
  {
    title: "风险等级",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render: ({ record }) => h(TagStatus, { type: record.vmStatus }),
  },
  {
    title: "所属系统",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "漏洞来源",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "状态",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render: ({ record }) => h(TagStatus, { type: record.vmStatus }),
  },
  {
    title: "最后检测时间",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "操作",
    width: 80,
    dataIndex: "action",
    fixed: "right",
    slotName: "action",
  },
];
</script>

<style lang="scss" scoped></style>
